<ion-app>
	<ion-split-pane contentId="main-content">
		<ion-menu contentId="main-content" type="overlay">
			<ion-content>
				<ion-list id="inbox-list">
					<ion-list-header>工具箱 Toolkit</ion-list-header>
					<ion-note><a href="https://gitee.com/xuender/toolkit" target="_blank">https://gitee.com/xuender/toolkit</a>
					</ion-note>

					<ion-menu-toggle auto-hide="false" *ngFor="let p of appPages; let i = index">
						<ion-item *ngIf="p.url" routerDirection="root" [routerLink]="[p.url]" lines="none" detail="false"
							routerLinkActive="selected">
							<ion-icon slot="start" [ios]="p.icon + '-outline'" [md]="p.icon + '-sharp'"></ion-icon>
							<ion-label>{{ p.title }}</ion-label>
						</ion-item>
						<ion-item *ngIf="!p.url" routerDirection="root" lines="none" detail="false" routerLinkActive="selected">
							<ion-icon slot="start" [ios]="p.icon + '-outline'" [md]="p.icon + '-sharp'"></ion-icon>
							<ion-label>{{ p.title }}</ion-label>
						</ion-item>
						<ng-container *ngFor="let i of p.items">
							<ion-item *ngIf="i.url" routerDirection="root" [routerLink]="[i.url]" lines="none" detail="false"
								routerLinkActive="selected">
								<ion-icon slot="start"></ion-icon>
								<ion-label>{{ i.title }}</ion-label>
							</ion-item>
						</ng-container>
					</ion-menu-toggle>
				</ion-list>

				<ion-list id="labels-list">
					<ion-list-header>连接</ion-list-header>

					<ion-item *ngFor="let l of links" lines="none" target="_blank" [href]="l.url">
						<ion-icon *ngIf="l.icon" slot="start" [ios]="l.icon" [md]="l.icon"></ion-icon>
						<ion-img *ngIf="l.image" slot="start" [src]="l.image"></ion-img>
						<ion-label>{{ l.title }}</ion-label>
					</ion-item>
				</ion-list>
			</ion-content>
		</ion-menu>
		<ion-router-outlet id="main-content"></ion-router-outlet>
	</ion-split-pane>
</ion-app>
